<template>
  <div ref="daily" id="daily" class="daily"></div>
</template>

<script>
import { ref, onMounted, watch } from "vue";
import { useECharts } from "@/hooks/useECharts";

export default {
  name: "BasicDonutChart",
  props: {
    chartData: Array
  },

  setup(props,ctx) {
    const daily = ref(null);
    const { setOptions } = useECharts(daily, ctx);
    
    const updateOptions = function(data) {
      let options = {
        series: [
          {
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            tooltip: {
              trigger: 'axis',
              textStyle: {
                color: '#000'
              }
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '10',
                fontWeight: 'bold',
                formatter: '{c}'
              }
            },
            data: data
          }
        ],
      }

      setOptions(options);
    }

    onMounted(() => {
      updateOptions(props.chartData)
    });

    watch(() => props.chartData, (val)=> {
      updateOptions(val)
    },{ deep: true , immediate: true })
    
    return {
      daily,
    };
  },
};
</script>


<style scoped>
.daily {
  width: 171px;
  height: 171px;
}
</style>